<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML常用元素练习</title>
  </head>
  <body>
    <h1>HTML常用元素练习</h1>
    <hr />
    <div>
      <h2>结构元素</h2>
      <p>常用的结构元素有body、nav、h1、h2、……</p>
    </div>
    <div>
      <h2>内容组织元素</h2>
      <p>内容组织元素有p、hr、ol、li、ul、div等</p>
      <ul>
        <li>p</li>
        <li>hr</li>
        <li>ol</li>
        <li>li</li>
      </ul>
      <ol>
        <li>h1</li>
        <li>h2</li>
        <li>h3</li>
        <li>h4</li>
      </ol>
    </div>
    <div>
      <h2>文本语义元素</h2>
      <p>
        常用的<a href="https://cn.bing.com/search?q=文本语义元素"
          >文本语义元素</a
        >有a、span
      </p>
      <p>
        <span>央视新闻客户端</span>
        <span>2023-03-21 12:57:37</span>
        <span>浏览量5031158</span>
      </p>
    </div>
    <div>
      <h2>内容嵌入元素</h2>
      <p>常用的内容嵌入元素有img、iframe、video、audio、svg</p>
      <p>
        <img
          src="https://gitee.com/static/images/logo-black.svg?t=158106664"
          alt=""
        />
      </p>
      <p>
        <iframe
          src="//player.bilibili.com/player.html?aid=769835796&bvid=BV1Er4y1V7KA&cid=741227460&page=1"
          scrolling="no"
          border="0"
          frameborder="no"
          framespacing="0"
          allowfullscreen="true"
          width="400px"
          height="300px"
        >
        </iframe>
      </p>
      <p>
        <video
          src="http://cq.cqnews.net/cqztlm/story-bg.mp4"
          width="400px"
          height="300px"
          controls
        ></video>
      </p>
      <p>
        <audio
          src="https://jcdn.xhby.net/project/xiaokang/assets/audio/short/01.mp3"
          controls
        ></audio>
      </p>
    </div>
    <div>
      <h2>表格元素</h2>
      <table border="1">
        <thead>
          <tr>
            <th>表头单元格</th>
            <th>表头单元格</th>
            <th>表头单元格</th>
          </tr>
        </thead>
        <tr>
          <td>表格单元格</td>
          <td>表格单元格</td>
          <td>表格单元格</td>
        </tr>
        <tr>
          <td>表格单元格</td>
          <td>表格单元格</td>
          <td>表格单元格</td>
        </tr>
        <tr>
          <td>表格单元格</td>
          <td>表格单元格</td>
          <td>表格单元格</td>
        </tr>
      </table>
    </div>
    <div>
        <h2>表单元素</h2>
        <form action="http://www.bing.com/search" method="get">
            <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
           </form>
    </div>
  </body>
</html>
